<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            {{msg}}
            {{name}}
            {{test}}
        </div>
        <button @click="sayHello">触发事件</button>
    </div>
</body>
<script>
    // 1、定义一个mixin
    const myMixin = {
        // 放任意组件的选项
        data() {
            return {
                name: '56黑马'
            }
        },
        // 定义生命周期的选项
        mounted() {
            console.log("minxin定义的mounted生命周期")
        },
        methods: {
            sayHello() {
                console.log('mixin sayHello')
            }
        },
        computed: {
            test() {
                return 'mixin的computed'
            }
        }
    }

    // 创建vue实例
    const app = new Vue({
        el: '#app',
        // mixins节点表示引入混入，接收一个数组，说明可以接收多个mixin
        mixins: [ myMixin ],
        data() {
            return {
                msg: 'hello vue',
                // 当组件选项与混入选项冲突的时候，优先使用组件选项
                name: '黑马56'
            }
        },
        mounted() {
            // 当组件和mixin同时定义生命周期选项，两个都会触发，而且mixin会先触发
            console.log('组件的mounted生命周期')
        },
        methods: {
            // 如果组件和mixin同时定义相同的方法，会使用组件的方法覆盖mixin的方法
            sayHello() {
                console.log('组件选项 sayHello')
            }
        },
        computed: {
            // 如果组件和mixin同时定义相同的计算属性，会使用组件的计算属性覆盖mixin的定义
            test() {
                return '组件的computed'
            }
        }
    })
</script>
</html>